<template>
  <div v-if="source" class="ele-gallery">
    <!-- 预览图 -->
    <div class="el-upload-list el-upload-list--picture-card">
      <li
        v-for="(source, index) of computedSources"
        :key="index"
        :class="source.type !== 'other' ? 'el-upload-list__item' : ''"
      >
        <slot v-bind="{ source: source, index: index }">
          <el-image
            v-if="source.type === 'image'"
            :lazy="lazy"
            :src="source.src"
            :style="computedStyle"
            fit="cover"
          />
          <div v-else-if="source.type === 'iframe'" :style="computedStyle">
            <iframe
              :src="source.src"
              allowfullscreen="true"
              border="0"
              frameborder="no"
              framespacing="0"
              scrolling="no"
            ></iframe>
          </div>
          <div v-if="showName" class="show-name">{{ source.name }}</div>
          <div v-else-if="source.type === 'other'" class="down-file-wrapp">
            <div class="down-file" @click="downFiles(source)">
              点击下载{{ source.name }}
            </div>
            <span
              v-if="removeFn"
              class="down-file-remove"
              @click="handleRemove(index)"
            >
              <el-icon><Delete /></el-icon>
            </span>
          </div>
        </slot>

        <span
          v-if="source.type !== 'other'"
          class="el-upload-list__item-actions"
        >
          <span @click="handlePreviewWin(index, source)">
            <el-icon >
              <Search  />
            </el-icon>
          </span>
          <span @click="handlePreview(index, source)">
            <el-icon>
              <VideoPlay v-if="typeSource.value === 'iframe'" />
              <ZoomIn v-else />
            </el-icon>
          </span>
          <span v-if="removeFn" @click="handleRemove(index)">
            <el-icon><Delete /></el-icon>
          </span>
          <slot name="action" v-bind="{ source: source, index: index }" />
        </span>
      </li>
    </div>
    <ele-gallery-dialog
      ref="dialog"
      :carousel-attrs="carouselAttrs"
      :slice-single="sliceSingle"
      :sources="computedSources"
      :title="title"
      :type="typeSource"
    />
  </div>
</template>

<script setup name="eleGallery">
import EleGalleryDialog from './eleGalleryDialog'
import axios from 'axios'
const { proxy } = getCurrentInstance()
const props = defineProps({
  // 类型(支持图片, 视频, iframe)
  type: {
    type: String,
    default: 'image',
    validator(value) {
      return ['image', 'iframe'].includes(value)
    },
  },
  showName: {
    type: Boolean,
    default: false,
  },
  // 缩略图大小, 宽 === 高时, 简略写法
  size: Number,
  // 缩略图宽度, 当给定width时, 会覆盖size的值
  width: Number,
  // 缩略图高度, 当给定height时, 会覆盖size值
  height: Number,
  // 缩略图是否懒加载
  lazy: {
    type: Boolean,
    default: false,
  },
  // 源
  source: [String, Array, Object],
  // 缩略图后缀
  // 当type为image时, 且未指定thumb, 可通过thumbSuffix设置缩略图
  thumbSuffix: String,
  // 缩略图样式
  thumbStyle: Object,
  // 轮播图属性
  carouselAttrs: Object,
  // 删除函数
  removeFn: Function,
  // 统一的弹框标题
  title: String,
  // 强制多张图片按照单张显示
  sliceSingle: {
    type: Boolean,
    default: true,
  },
})
const typeSource = ref(props.type)
const viewClass = computed(() => {
  if (typeSource.value === 'iframe') {
    return 'el-icon-video-play'
  } else {
    return 'el-icon-zoom-in'
  }
})
const computedStyle = computed(() => {
  let width = props.width || props.size
  let height = props.height || props.size
  if (typeSource.value === 'image') {
    width = width ? width + 'px' : '150px'
    height = height ? height + 'px' : '150px'
  } else if (typeSource.value === 'iframe') {
    width = width ? width + 'px' : '360px'
    height = height ? height + 'px' : 'auto'
  }

  return Object.assign(
    {},
    { width, height, display: 'block' },
    props.thumbStyle
  )
})
// 缩略图
const thumbs = computed(() => {
  return computedSources.value.map((item) => {
    return item.thumb
  })
})
console.log(props.source)
const computedSources = computed(() => {
  console.log(props.source)
  const sources = props.source
  if (typeof sources === 'string') {
    // 传入参数为 string
    return [getStringSource(sources)]
  } else if (Object.prototype.toString.call(sources) === '[object Array]') {
    // 传入参数为 array, 数据里面既可以有string 又可以有 object
    const res = []
    console.log(sources)
    sources.forEach((item) => {
      if (item != null) {
        res.push(getObjectSource(item))
      }
    })
    return res
  } else if (Object.prototype.toString.call(sources) === '[object Object]') {
    // 传入参数为 object
    return [getObjectSource(sources)]
  } else {
    return []
  }
})
function handlePreviewWin(index, row){
  window.open(row.thumb, '_blank', 'width=1200,height=1200');
}
// 点击查看
function handlePreview(index) {
  proxy.$refs.dialog.startPreview(index)
}
function handleRemove(index) {
  props.removeFn(index)
}
// 获取字符串形式来源
function getStringSource(src) {
  let thumb = '/pub' + src
  let type = src.split('.')[src.split('.').length - 1]
  if (type === 'pdf') {
    typeSource.value = 'iframe'
  } else if (type === 'doc' || type === 'docx') {
    typeSource.value = 'other'
  } else if (props.type === 'image') {
    typeSource.value = 'image'
    thumb = props.thumbSuffix ? thumb + props.thumbSuffix : thumb
  }
  return {
    type: typeSource.value,
    src: '/pub' + src,
    thumb: thumb,
  }
}
// 获取对象形式来源
function getObjectSource(source) {
  console.log(source)
  let type = source.name.split('.')[source.name.split('.').length - 1]
  if (type === 'pdf') {
    source.type = 'iframe'
    typeSource.value = 'iframe'
  } else if (type === 'doc' || type === 'docx') {
    source.type = 'other'
    typeSource.value = 'other'
  } else {
    source.type = 'image'
    typeSource.value = 'image'
  }
  source.thumb = '/pub' + source.filePath
  return {
    type: typeSource.value,
    src: axios.defaults.baseURL + '/pub' + source.filePath,
    thumb: source.thumb,
    name: source.name,
    filePath: source.filePath,
  }
}
function downFiles(file) {
  axios({ method: 'get', url: file.thumb, responseType: 'blob' }).then(
    (res) => {
      let blob = res
      let urlL = window.URL.createObjectURL(new Blob([blob]))
      let link = document.createElement('a')
      link.href = urlL
      link.download = file.name
      link.click()
    }
  )
}
</script>

<style scoped>
.ele-gallery .el-upload-list--picture-card .el-upload-list__item {
  width: auto;
  height: auto;
  margin: 0 8px 0 0;
}

.ele-gallery-image {
  max-width: 100%;
  max-height: 100%;
}

.ele-gallery-iframe.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.ele-gallery-iframe.embed-responsive .embed-responsive-item,
.ele-gallery-iframe.embed-responsive iframe,
.ele-gallery-iframe.embed-responsive embed,
.ele-gallery-iframe.embed-responsive object,
.ele-gallery-iframe.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.ele-gallery-iframe.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
.ele-gallery-iframe.embed-responsive-4by3 {
  padding-bottom: 75%;
}
.down-file-wrapp {
  display: flex;
  align-items: center;
  padding: 5px 0;
}
.down-file-wrapp:hover .down-file-remove {
  display: inline-block;
}
.down-file-remove {
  display: none;
  padding-left: 5px;
}
.down-file {
  color: #6dc1a9;
  cursor: pointer;
}
.down-file:hover {
  color: #11f0ad;
}
.show-name {
  width: 151px;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #c2c7c6;
  word-wrap: break-word;
  word-break: break-all;
}
</style>
